import React, { useEffect, useState } from 'react';
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  TreeSelect,
} from 'antd';

import type { FormProps } from 'antd';
const { TextArea } = Input;
type SizeType = Parameters<typeof Form>[0]['size'];

const Myform: React.FC = (props) => {
  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };
  const [form] = Form.useForm();
  let [pdata,setpdata]=useState(props.data)
  useEffect(()=>{
    form.setFieldsValue(props.data1)
  })
  const onFinish: FormProps['onFinish'] = (values) => {
    
    if(props.title=="添加"){
        let obj={
            key: new Date().getTime(),
            ...values,
        }
        props.data.push(obj)
    }else{
        let obj={
          ...props.data1,
            ...values
        }
        props.xiugai(obj)
        
    }
    props.onOk()
  };
  
  return (
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 14 }}
      layout="horizontal"
      initialValues={{ size: componentSize }}
      onValuesChange={onFormLayoutChange}
      size={componentSize as SizeType}
      style={{ maxWidth: 600 }}
      onFinish={onFinish}
      form={form}
    >
      
      <Form.Item label="用户名" name="name">
      <Input />
      </Form.Item>
      <Form.Item label="角色" name="role">
       <Input />
      </Form.Item>
      <Form.Item label="职业" name="tags">
        <Select>
          <Select.Option value="全栈工程师">全栈工程师</Select.Option>
          <Select.Option value="前端工程师">前端工程师</Select.Option>
          <Select.Option value="后端工程师">后端工程师</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item label="简介" name="desc">
      <TextArea rows={4} />
      </Form.Item>
      <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        确定
      </Button>
    </Form.Item>
    </Form>
  );
};

export default Myform;